<template>
  <el-row style="height: 200px;" :gutter="10" type="flex" justify="space-between">
    <el-col :class="{ active: isActive == 0 }">
      <!-- hc： 鼠标移入改变height -->
      <div
        class="grid-content bg-purple"
        :class="[{ 'hc': isActive == 0 },{'bg':isActive==0}]"
        @mouseover="bg(0)"
        @mouseout="bg(0)"
      >
        <div class="top"><span class="num">2100</span><span class="title">预计 (今天)</span></div>
        <div class="bottom-0">
          <echart ref="smallEcharts"/>
        </div>
      </div>
    </el-col>
    <el-col :class="{ active: isActive == 1 }">
      <div
        class="grid-content bg-purple"
        :class="[{ 'hc': isActive == 1 },{'bg':isActive==1}]"
        @mouseover="bg(1)"
        @mouseout="bg(1)"
      >
      <div class="top">
        <span class="num">187</span><span class="title">已完成 (今天)</span>
      </div>
      <div class="bottom bt">
        <span>↑</span><span>+3%</span>
      </div>
      </div>
    </el-col>
    <el-col :class="{ active: isActive == 2 }">
      <div
        class="grid-content bg-purple"
        :class="[{ 'hc': isActive == 2 },{'bg':isActive==2}]"
        @mouseover="bg(2)"
        @mouseout="bg(2)"
      >
      <div class="top">
        <span class="num">￥86201.21</span><span class="title">销售量(今天)</span>
      </div>
      <div class="bottom bt">
        <span>↑</span><span>+13%</span>
      </div>
      </div>
    </el-col>
    <el-col :class="{ active: isActive == 3 }">
      <div
        class="grid-content bg-purple"
        :class="[{ 'hc': isActive == 3 },{'bg':isActive==3}]"
        @mouseover="bg(3)"
        @mouseout="bg(3)"
      >
      <div class="top">
        <span class="num">￥662131.41</span><span class="title">销售量 (周)</span>
      </div>
      <div class="bottom bt" style="color:red;">
        <span>↓</span><span>-3%</span>
      </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import echart from '@/components/smallEchart'
export default {
  components:{
    echart
  },
  data() {
    return {
      isActive: 0,
    };
  },
  methods: {
    bg(index) {
      this.isActive = index;
    },
  },
  watch:{
    'isActive'(){
      if (this.isActive==0) {
      this.$refs.smallEcharts.$el.style.height='130px';
      }else{
      this.$refs.smallEcharts.$el.style.height='80px';
      }
    setTimeout(()=>{
      this.$refs.smallEcharts.autoResize()
  
      console.log(this.$refs.smallEcharts.$el.style.height);
    },300)
    }
  }
};
</script>

<style lang="less" scoped>
.active {
  width: 30% !important;
  font-size: 30px;
}
.hc {
  height: 200px !important;
}
.bg{
  background: rgb(88, 99, 183) !important;
}
.el-col {
  width: 20%;
  transition: all .5s;
}

.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: rgb(37, 45, 90);
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  // :25px 0 0 0/50px 0 0 0
  border-radius: 0px 0px 15px 15px;
  min-height: 36px;
  height: 150px;
  padding: 15px 15px;
  display: flex;
  flex-direction: column;
  .num{
      font-weight: 400;
      color: #fff;
      margin-bottom: 5px;
    }
    .title{
      color: #ccc;
      font-size: 12px !important;
    }
    .bt{
      color: rgb(5, 211, 5);
      margin-top: 15px;
      font-weight: 400;
      span{
        margin-right: 10px;
      }
    }
  // justify-content: space-between;
  .left {
    i {
      font-size: 60px;
      color: #fff;
      height: 100%;
      width: 80px;
      text-align: center;
      padding-top: 5px;
      border-radius: 10px;
    }
  }
  .right {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    span {
      margin-bottom: 5px;
      color: rgb(255, 255, 255);
      font-size: 15px;
    }
    em {
      font-size: 25px;
      color: #fff;
    }
  }
  .top{
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 10px;
   
  }
  .bottom{
    // background: green;
    display: flex;
    align-content: center;
  }
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
